<template>
	<view style="padding: 30rpx 0;height: 100%;overflow: auto;">
		<view class="box">
			<view class="line">
				<u--textarea placeholder="请描述货品详情" border="none" v-model="form.title"></u--textarea>
			</view>
			<view class="line">
				<view class="" style="color: #010101;min-width: 180rpx;">
					图片
				</view>
				<view class="" style="display: flex;align-items: center;">
					<u-upload :fileList="fileList" name="3" :multiple="true" :maxCount="7" @afterRead="afterRead"
						@delete="deletePic"></u-upload>
				</view>
			</view>
			<view class="line">
				<view class="" style="color: #010101;">
					视频
				</view>
				<view class="" style="display: flex;align-items: center;">
					<u-upload :fileList="fileList1" name="4" :multiple="false" :maxCount="1" @afterRead="afterRead1"
						@delete="deletePic1" accept="video"></u-upload>
				</view>
			</view>

			<view class="line" @click="chooseLo">
				<view class="" style="color: #010101;min-width: 140rpx;">
					选择地址
				</view>
				<view class="" style="display: flex;align-items: center;">
					<view class="" v-if="form.address" style="margin-right: 10rpx;">
						{{form.address}}
					</view>
					<u-icon name="arrow-right" color="#838383"></u-icon>
				</view>
			</view>
			<view class="line">
				<view class="" style="color: #010101;">
					价格
				</view>
				<u--input placeholder="请输入价格" border="none" type="digit" v-model="form.price"
					color="#FB1E1B"></u--input>
			</view>
			<view class="line">
				<view class="" style="color: #010101;">
					联系电话
				</view>
				<u--input placeholder="请输入联系电话" border="none" type="number" v-model="form.phone"></u--input>
			</view>
			<view class="line" @click="show=true">
				<view class="" style="color: #010101;">
					分类
				</view>
				<view class="" style="display: flex;align-items: center;">
					<view class="" v-if="type" style="margin-right: 10rpx;">
						{{type}}
					</view>
					<u-icon name="arrow-down" color="#838383"></u-icon>
				</view>
			</view>
			<view class="" v-if="hasJson">
				<view class="line" v-for="(value, key, index) in form.content_json1" :key="index">
					<view class="" style="color: #010101;">
						{{ key }}
					</view>
					<u--input :placeholder="'请输入'+key" border="none" type="text"
						v-model="form.content_json1[key]"></u--input>
				</view>
			</view>

			<!-- 			<view class="line">
				<view class="" style="color: #010101;">
					体重（kg）
				</view>
				<u--input placeholder="请输入体重" border="none" type="digit" v-model="form.weigh"></u--input>
			</view>
			<view class="line">
				<view class="" style="color: #010101;">
					品种
				</view>
				<u--input placeholder="请输入品种" border="none" v-model="form.brand"></u--input>
			</view>
			<view class="line">
				<view class="" style="color: #010101;">
					年龄
				</view>
				<u--input placeholder="请输入年龄" border="none" v-model="form.age" type="number"></u--input>
			</view> -->

			<view class="btn" @click="submit">
				发布
			</view>
		</view>
		<!-- 		<view class="" style="height: 30rpx;opacity: 0;">
			1
		</view> -->
		<u-picker :show="show" keyName="name" @confirm="confirm" :columns="columns" @cancel="show=false" ref="uPicker"
			@change="changeHandler"></u-picker>
	</view>
</template>

<script>
	import {
		createInfo,
		cateList
	} from "@/request/api/tiezi.js"
	export default {
		data() {
			return {
				fileList: [],
				fileList1: [],
				columns: [],
				columnData: [],
				type: "",
				address: "",
				show: false,
				locat: {},
				form: {
					"title": "",
					"images": "",
					"lat": "",
					"lng": "",
					"price": null,
					"cate_id": "",
					address: "236号仓山区应急管理局",
					// high: null,
					// weigh: null,
					// age: null,
					// brand: null,
					video: "",
					phone: "",
					content_json1: {

					},
					content_json: ""

				},
				hasJson: false
			}
		},
		onShow() {

			cateList().then(res => {
				this.columns = [res.data];
				if (res.data.length > 0) {
					this.columns.push(res.data[0].child);
					res.data.forEach(item => {
						this.columnData.push(item.child)
					})
				}
			})


		},

		methods: {
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			confirm(e) {
				console.log(e)
				this.form.cate_id = e.value[1].id;
				this.type = e.value[1].name;
				if (e.value[1].labels_list) {
					this.hasJson = true;
					this.form.content_json1 = {};
					let js = e.value[1].labels_list.split(',')
					js.forEach(item => {
						this.form.content_json1[item + ''] = '';
					})

				} else {
					this.hasJson = false
				}
				console.log(this.form)
				this.show = false;
			},
			chooseLo() {
				uni.showLoading({
					mask: true
				})
				let that = this;
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						uni.hideLoading()
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						uni.chooseLocation({
							geocode: true,
							latitude: res.latitude,
							longitude: res.longitude,
							success: function(res1) {
								that.form.address = res1.address;
								that.form.lat = res1.latitude;
								that.form.lng = res1.longitude;
							}
							// fail: function(res) {
							// 	uni.showToast({
							// 		icon: "none",
							// 		title: res.errMsg
							// 	})
							// }
						});
					},
					fail: function(res) {
						console.log(res)
						uni.showToast({
							icon: "none",
							title: res.errMsg
						})
					}
				});

			},
			async submit() {
				if (!this.form.title) {
					uni.$u.toast('请描述货品详情');
					return
				}
				if (this.fileList.length == 0) {
					uni.$u.toast('上传至少一张图片');
					return
				}
				if (this.fileList1.length == 0) {
					uni.$u.toast('上传至少一个视频');
					return
				}
				if (!this.form.cate_id) {
					uni.$u.toast('选择分类');
					return
				}
				if (!this.form.price) {
					uni.$u.toast('输入价格');
					return
				}
				if (!this.form.phone) {
					uni.$u.toast('输入联系电话');
					return
				}
				// if (!this.form.hight) {
				// 	uni.$u.toast('输入身高');
				// 	return
				// }
				// if (!this.form.weight) {
				// 	uni.$u.toast('输入体重');
				// 	return
				// }
				// if (!this.form.age) {
				// 	uni.$u.toast('输入年龄');
				// 	return
				// }
				// if (!this.form.brand) {
				// 	uni.$u.toast('输入品种');
				// 	return
				// }
				if (!this.form.address) {
					uni.$u.toast('选择地址');
					return
				}

				let json = JSON.parse(JSON.stringify(this.form))
				json['images'] = this.fileList.map(item => item.url).join(',');
				json['video'] = this.fileList1.map(item => item.url).join(',');
				json.content_json = JSON.stringify(json.content_json1)
				delete json.content_json1
				let res = await createInfo(json);
				if (res.code == 1) {
					// uni.navigateBack()
					uni.reLaunch({
						url: "/pages/my/my"
					})
				}
			},
			deletePic(e) {
				this.fileList.splice(e.index, 1)
			},
			deletePic1(e) {
				this.fileList = [];
			},
			// async afterRead(e) {
			// 	let that = this;
			// 	uni.showLoading({
			// 		mask: true,
			// 		title: "上传中"
			// 	})
			// 	uni.uploadFile({
			// 		url: 'http://ny.fuliaoxx.com/api/common/upload', // 接口url
			// 		filePath: e.file.url,
			// 		name: 'file',
			// 		header: {
			// 			"token": uni.getStorageSync('token') ? uni.getStorageSync('token') : ""
			// 		}, // 请求头
			// 		success: async (res) => {
			// 			let json = JSON.parse(res.data)
			// 			// that.model.image = json.data.url;
			// 			that.fileList = [...that.fileList, {
			// 				url: 'http://ny.fuliaoxx.com' + json.data
			// 					.url,
			// 				key: json.data
			// 					.url
			// 			}]
			// 			uni.hideLoading()
			// 		},
			// 	})
			// },
			async afterRead(e) {
				console.log(e)
				let that = this;
				uni.showLoading({
					mask: true,
					title: "上传中"
				})
				e.file.forEach(it1 => {
					uni.uploadFile({
						url: 'http://ny.fuliaoxx.com/api/common/upload', // 接口url
						filePath: it1.url,
						name: 'file',

						header: {
							isAdmin: true,
							token: uni.getStorageSync("shop_login_token")
						},
						success: async (res) => {
							let json = JSON.parse(res.data)
							console.log(JSON.parse(res.data))
							// that.model.image = json.data.url;
							that.fileList = [...that.fileList, {
								url: 'http://ny.fuliaoxx.com' + json.data.url,
								key: json.data
									.url
							}]
							uni.hideLoading()
						},
					})
				})
			},
			async afterRead1(e) {
				let that = this;
				uni.showLoading({
					mask: true,
					title: "上传中"
				})
				uni.uploadFile({
					url: 'http://ny.fuliaoxx.com/api/common/upload', // 接口url
					filePath: e.file.url,
					name: 'file',
					header: {
						"token": uni.getStorageSync('token') ? uni.getStorageSync('token') : ""
					}, // 请求头
					success: async (res) => {
						let json = JSON.parse(res.data)
						// that.model.image = json.data.url;
						that.fileList1 = [{
							url: 'http://ny.fuliaoxx.com' + json.data
								.url,
							key: json.data
								.url
						}]
						uni.hideLoading()
					},
				})
			},
		}
	}
</script>
<style>
	page {
		height: 100%;
		overflow: auto;
	}
</style>
<style scoped lang="scss">
	::v-deep .line {
		input {
			text-align: right !important;
		}

		// 	.u-form-item__body__right__message {
		// 		text-align: right;
		// 	}

		// 	.u-upload__button {
		// 		display: flex;
		// 		justify-content: center;
		// 		background-color: #F8F8F8;
		// 	}
	}

	.box {
		margin: 0 30rpx;
		background-color: white;
		border-radius: 30rpx;
		padding: 30rpx 0;

		.line {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
		}

		.btn {
			background-color: #2DBC26;
			color: white;
			padding: 26rpx 0;
			margin: 30rpx auto;
			width: 60%;
			border-radius: 100px;
			text-align: center;
		}
	}
</style>